<template>
	<view>
	<u-loading-page :loading="isload" v-if="isload"></u-loading-page>
	<view class="content" v-else>
		<view class="reason">
			<text>退款原因</text>
			<view style="color: #999;" @click="show = true">{{reason}}<text class="iconfont icon-jinrujiantouxiao"></text></view>
		</view>
		<view class="details">
			<text style="font-size: 28rpx;">商品详情</text>
		<OrderShopping :orderdetails='orderdetails.goods'></OrderShopping>
		</view>
		<DetailsInfo :orderInfo='orderdetails'></DetailsInfo>
		<view class="number">
			<view class="number-td">
				<text>订单编号:</text>
				<view class="copy">{{orderdetails.order_sn}}<view @click="copybtn">复制</view></view>
			</view>
			<view class="number-td">
				<text>支付方式:</text>
				<text style="color: #025E21;">在线支付</text>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="footer-btn">
			<u-button type="primary" shape="circle" text="申请退款" @click="apply"></u-button>
			<u-button color="#999999" shape="circle" text="取消退款"></u-button>
		</view>
		<!-- 底部弹出层 -->
		<u-popup :show="show" @close="close" mode="bottom" :round="10">
			<view class="reason-list">
				<view class="herder">退款原因</view>
				<view class="reason-box">
					<view @click="select(item.name)" v-for="item in reasonlist" :key="item.id">{{item.name}}</view>
				</view>
				<u--textarea v-model="reason" placeholder="请输入退款原因" ></u--textarea>
			</view>
		</u-popup>
	</view>
	</view>
</template>

<script>
	import ordershopping from '../../components/ordershopp.vue'
	import detailsinfo from '../../components/detailsinfo.vue'
	import {getorderdetails} from '@/api/commodity.js'
	import {orderrefund} from '@/api/place.js'
	export default{
		data(){
			return{
				show:false,
				isload:true,
				reason:'',
				reasonlist:[
					{name:'菜品/收货异常',id:1},
					{name:'与商品描述不符',id:2},
					{name:'商品出现异常',id:3},
					{name:'地址错误',id:4},
					{name:'不想要了',id:5}
				],
				orderdetails:{}
			}
		},
		components:{
			OrderShopping:ordershopping,
			DetailsInfo:detailsinfo
		},
		methods:{
			close(){
				this.show = false
			},
			select(reason){
				this.reason = reason
				this.close()
			},
			copybtn(){ 
				uni.setClipboardData({
					data:this.orderdetails.order_sn,
				})
			},
			async apply(){
				const res = await orderrefund({
					id:this.orderdetails.id,
					reason:this.reason,
				})
				if(res.status === 200){
					uni.redirectTo({
						url:'/page_allorders/index?num=4&state=50'
					})
				}	
			},
			async getdetailapi(id){
				const res = await getorderdetails(id)
				this.orderdetails = res.data
				this.isload = false
			}
		},
		onLoad(el) {
			this.getdetailapi(el.id)
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fafafa;
	}
	.content{
		padding: 20rpx 40rpx;
	}
	.reason{
		display: flex;
		justify-content: space-between;
		padding: 22rpx;
		font-size: 28rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.icon-jinrujiantouxiao{
			font-size: 28rpx;
		}
	}
	.details{
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx 0 20rpx 20rpx;
		border-radius: 20rpx;
	}
	.number{
		font-size: 26rpx;
		background-color: #fff;
		padding: 30rpx 24rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.number-td{
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			color: #999;
			.copy{
				display: flex;
				view{
					font-size: 18rpx;
					padding: 6rpx 18rpx;
					border: 1px solid #999999;
					border-radius: 10rpx;
					margin-left: 10rpx;
				}
			}
			&:nth-child(1){
				margin-top: 0;
			}
		}
	}
	.footer-btn{
		margin-top: 64rpx;
		.u-button{
			margin-bottom: 30rpx;
		}
	}
	.reason-list{
		height:840rpx ;
		padding: 40rpx;
		.herder{
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
		}
		.reason-box{
			margin: 40rpx 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			view{
				background-color: #fafafa;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>